<template>
    <el-row>
        <!-- 头部 -->
        <el-col :span="24">
            <el-card shadow="hover">
                <el-breadcrumb :separator-icon="ArrowRightBold">
                    <el-breadcrumb-item :to="{ path: '/admin_index' }">首页</el-breadcrumb-item>
                    <el-breadcrumb-item>开奖管理</el-breadcrumb-item>
                    <el-breadcrumb-item>澳门28</el-breadcrumb-item>
                </el-breadcrumb>
            </el-card>
        </el-col>
        <div style="padding: 5px;"></div>
        <!-- 内容区域 -->
        <el-col :span="24">
            <el-card shadow="hover">
              <template #header>
                <div style="display: flex;justify-content: space-between">
                  <div style="display: flex; align-items: center;">
                    <el-input style="width: 260px;" v-model="inputval" placeholder="请输入开奖期号" />
                    <div style="padding: 5px;"></div>
                    <el-button type="primary" :icon="Search" @click="inputSearch()">搜索</el-button>
                    <div style="width: 50px;"></div>
                    <el-button type="primary" :icon="Search" @click="show_yskj()">预设开奖</el-button>
                  </div>
                  <div>
                    <span style="margin-left:10px;">只显示进行和预设</span>
                    <el-tooltip :content="page.is_ys == 1 ? '是' : '否'" placement="top">
                      <el-switch v-model="page.is_ys" :active-value="1" :inactive-value="0"  @change="changeIsYs"></el-switch>
                    </el-tooltip>
                  </div>
                </div>
              </template>

                <!-- 表格 -->
                <el-table :data="tableData.list" :border="true" style="width: 100%">
                    <el-table-column prop="id" label="序号" width="100" >
                      <template #default="scope">
                        <div style="font-weight: bold;">{{ scope.row.id }}</div>
                      </template>
                    </el-table-column>

                    <el-table-column label="游戏类型">
                        <template #default="scope">
                            <el-tag>澳门28</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column prop="issue" label="开奖期号" >
                      <template #default="scope">
                        <div style="font-weight: bold;">{{ scope.row.issue }}</div>
                      </template>
                    </el-table-column>

                    <el-table-column prop="number" label="开奖号码" >
                      <template #default="scope">
                        <div style="font-size: 18px; text-align: center; font-weight: bold;">{{ scope.row.number }}</div>
                        <div style="display: flex;justify-content: center">
                          <div class="tag_box" v-for="(v,i) in scope.row.bet_name" :key="i" >
                            <el-tag  type="danger" v-if="['大','大单','大双','单'].includes(v)" style="font-weight: bold;">{{v}}</el-tag>
                            <el-tag  type="success" v-else style="font-weight: bold;">{{v}}</el-tag>
                          </div>

                        </div>
                      </template>
                    </el-table-column>

                  <el-table-column prop="time" label="系统开奖时间">
                    <template #default="scope">
                      <div style="font-weight: bold;" v-if="scope.row.status==1">
                        <Countdown :seconds="scope.row.end_time" @finish="handleFinish"/>
                      </div>
                      <div style="font-weight: bold;" v-else>
                        {{scope.row.time}}
                      </div>
                    </template>
                  </el-table-column>
                    <el-table-column prop="create_time" label="创建时间" >
                      <template #default="scope">
                        <div style="font-weight: bold;">{{ scope.row.create_time }}</div>
                      </template>
                    </el-table-column>

                    <el-table-column label="开奖状态" width="200">
                        <template #default="scope">
                            <el-tag v-if="scope.row.status == 1" type="danger" plain style="font-weight: bold;">进行中</el-tag>
                            <el-tag v-if="scope.row.status == 2" type="success" plain style="font-weight: bold;">已开奖</el-tag>
                            <el-tag v-if="scope.row.status == 3" type="info" plain style="font-weight: bold;">预设中</el-tag>
                        </template>
                    </el-table-column>

                    <el-table-column label="订单操作" width="190">
                        <template #default="scope">
                            <el-button type="success" @click="show_edit(scope.row)" v-if="scope.row.status != 2">修改</el-button>
                            <el-button type="success" @click="manual_lottery(scope.row)">手动开奖</el-button>
                        </template>
                    </el-table-column>

                </el-table>
                <!-- 分页 -->

                <div style="padding: 10px;"></div>
                <el-pagination small background v-model:currentPage="page.pagenum" v-model:page-size="page.pagesize"
                    :page-sizes="[20, 50]" :small="small" :background="background" layout="total, prev, pager, next, jumper"
                    :total="page.total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />

            </el-card>
        </el-col>
    </el-row>

    <!-- 菜单权限管理 -->
    <el-dialog v-model="showDialog" title="手动开奖" center width="40%" :destroy-on-close="true">
        <el-form label-width="80px">

            <el-form-item label="开奖期号">
                <el-input v-model="formData.issue" :disabled="Boolean(formData.issue)" />
            </el-form-item>
            <el-form-item label="开奖号码">
              <div class="number_list">
                <el-select   popper-class="custom-select-dropdown"
                    style="width: 60px;padding:0 10px"
                    v-model="formData.numberArr[0]"
                    filterable
                    remote
                    reserve-keyword
                    placeholder="请输入关键词">
                  <el-option
                      v-for="item in numberArr"
                      :label="item"
                      :value="item"
                      :key="item"
                  >
                  </el-option>
                </el-select>
                <el-select   popper-class="custom-select-dropdown"
                    v-model="formData.numberArr[1]"
                    style="width: 60px;padding:0 10px"
                    filterable
                    remote
                    reserve-keyword
                    placeholder="请输入关键词">
                  <el-option
                      v-for="item in numberArr"
                      :label="item"
                      :value="item"
                      :key="item"
                  >
                  </el-option>
                </el-select>
                <el-select   popper-class="custom-select-dropdown"
                    v-model="formData.numberArr[2]"
                    style="width: 60px;padding:0 10px"
                    filterable
                    remote
                    reserve-keyword
                    placeholder="请输入关键词">
                  <el-option
                      v-for="item in numberArr"
                      :label="item"
                      :value="item"
                      :key="item"
                  >
                  </el-option>
                </el-select>
              </div>
            </el-form-item>

        </el-form>

        <template #footer>
            <el-button type="primary" @click="formSubmit()">确定手动开奖</el-button>
        </template>
    </el-dialog>

    <el-dialog v-model="showYskj" title="预设开奖" center width="30%" :destroy-on-close="true">
        <el-form label-width="80px">
            <el-form-item label="预设期数">
                <el-input type="number" v-model="yskjData.num" />
            </el-form-item>
        </el-form>
        <template #footer>
            <el-button type="primary" @click="yskjSubmit()" :disabled="isPost">确定预设开奖</el-button>
        </template>
    </el-dialog>

    <el-dialog v-model="showEdit" title="修改" center width="30%" :destroy-on-close="true">
        <el-form label-width="80px">
            <el-form-item label="号码">
				<div class="number_list">
          <el-select   popper-class="custom-select-dropdown"
              style="width: 60px;padding:0 10px"
              v-model="editData.num1"
              filterable
              remote
              reserve-keyword
              placeholder="请输入关键词">
            <el-option
                v-for="item in numberArr"
                :label="item"
                :value="item"
                :key="item"
            >
            </el-option>
          </el-select>
          <el-select   popper-class="custom-select-dropdown"
              v-model="editData.num2"
              style="width: 60px;padding:0 10px"
              filterable
              remote
              reserve-keyword
              placeholder="请输入关键词">
            <el-option
                v-for="item in numberArr"
                :label="item"
                :value="item"
                :key="item"
            >
            </el-option>
          </el-select>
          <el-select   popper-class="custom-select-dropdown"
              v-model="editData.num3"
              style="width: 60px;padding:0 10px"
              filterable
              remote
              reserve-keyword
              placeholder="请输入关键词">
            <el-option
                v-for="item in numberArr"
                :label="item"
                :value="item"
                :key="item"
            >
            </el-option>
          </el-select>
				</div>
            </el-form-item>
        </el-form>
        <template #footer>
            <el-button type="primary" @click="editSubmit()">确定修改</el-button>
        </template>
    </el-dialog>
	
</template>

<script setup>

import { ref, reactive, onMounted } from 'vue'
import { request_post } from '@/common/axios/request.js'
import { success, error } from '@/common/tool/message.js'
import { ArrowRightBold, Search } from '@element-plus/icons-vue'
import Countdown from '@/components/Countdown.vue';

const showDialog = ref(false)
const tableData = reactive({ list: [] })
const numberArr = ref([0,1,2,3,4,5,6,7,8,9])
const formData = reactive({
    issue: '',
  numberArr: [0,0,0],
})

onMounted(() => {
  page.is_ys = Number(localStorage.getItem('is_am_ys'))||0;
    admin_xinjiapo_issue()
})

const showYskj = ref(false)
const yskjData = reactive({
	type: 'xinjiapo',
    num: 1
})
function show_yskj(item) {
    showYskj.value = true
}
const isPost = ref(false)
function yskjSubmit() {
  if(yskjData.num >= 20) {
    return error('单次预设不得超过20期')
  }
  if (isPost.value) return
  isPost.value = true
    request_post('/admin_yskj', yskjData).then((res) => {
        if (res.data.code == 200) {
            showYskj.value = false
			page.issue = ''
			page.pagenum = 1
			page.pagesize = 18
			page.total = 0
          isPost.value = false
			admin_xinjiapo_issue()
            return success(res.data.msg)
        } else {
            return error(res.data.msg)
        }
    })
}

const showEdit = ref(false)
const editData = reactive({
	type: 'xinjiapo',
	id: '',
    num1: 0,
    num2: 0,
    num3: 0,
})
function show_edit(item) {
    showEdit.value = true
	editData.id = item.id
	let number = []
	if(item.number){
		number = item.number.split(",");
	}
	editData.num1 = parseInt(number[0]) || 0
	editData.num2 = parseInt(number[1]) || 0
	editData.num3 = parseInt(number[2]) || 0
}
function editSubmit() {
    request_post('/admin_issue_edit', editData).then((res) => {
        if (res.data.code == 200) {
            showEdit.value = false
			page.issue = ''
			page.pagenum = 1
			page.pagesize = 18
			page.total = 0
			admin_xinjiapo_issue()
            return success(res.data.msg)
        } else {
            return error(res.data.msg)
        }
    })
}


function manual_lottery(item) {
    showDialog.value = true
    formData.issue = item.issue
  let number = []
  if(item.number){
    number = item.number.split(",");
  }
  formData.numberArr[0] = parseInt(number[0]) || 0
  formData.numberArr[1] = parseInt(number[1]) || 0
  formData.numberArr[2] = parseInt(number[2]) || 0
}

function formSubmit() {
  formData.number = formData.numberArr.toString()
    request_post('/admin_xinjiapo_manual_issue', formData).then((res) => {
        if (res.data.code == 200) {
            showDialog.value = false
          page.pagenum = 1
          admin_xinjiapo_issue()
            return success(res.data.msg)
        } else {
            return error(res.data.msg)
        }
    })
}

// 搜索 
const inputval = ref('')

function inputSearch() {
    if (inputval.value == '') {
        return error('请输入开奖期号')
    }
    page.issue = inputval.value
    admin_xinjiapo_issue()
}



// 获取用户列表
function admin_xinjiapo_issue() {

    request_post('/admin_xinjiapo_issue', page).then((res) => {
        console.log(res)
        if (res.data.code == 200) {
            tableData.list = res.data.data.data
            page.total = res.data.data.total
        } else {
            return error(res.data.msg)
        }
    })

}

const page = reactive({
    issue: '',
    pagenum: 1,
    pagesize: 18,
    total: 0,
    is_ys:0,
})
function changeIsYs(e){

  localStorage.setItem('is_am_ys',e)
  page.is_ys = e
  admin_xinjiapo_issue()
}

function handleSizeChange(val) {
    page.pagenum = val
    admin_xinjiapo_issue()
}
function handleCurrentChange(val) {
    page.pagenum = val
    admin_xinjiapo_issue()
}
function handleFinish(){

  setTimeout(()=>{admin_xinjiapo_issue()},1000)

}

</script>

<style>
	.number_list{
		display: flex;
		align-items: center;
	}
	.number_list .el-input-number{
		width: 100px;
		margin-right: 15px;
	}
  .tag_box{
    margin:0 2px;
  }
</style>